<template>

    <div class="search-container">
        <p class="textitem flex-start" style="font-size: 18px; margin-bottom: 16px; ">
            服务包管理
        </p>
        <el-form class="search-form" @submit.prevent style="margin-top: 40px;">
            <el-row :gutter="20">
                <el-col :span="18" class="no-padding">
                    <el-row :gutter="16">

                        <el-col :span="8">
                            <el-form-item label="服务包状态" style="padding-left: 12px;">
                                <el-select v-model="formItem.type" style="width: 200px;" placeholder="请选择"
                                    @change="findServicePacks" clearable>
                                    <el-option v-for="item in uniqueTypes" :key="item" :label="item"
                                        :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <!-- 项目名称输入框 :suffix-icon="Search"键盘事件-->
                        <el-col :span="16">
                            <el-form-item>
                                <el-input v-model="formItem.name" style="width: 376px;" size="large"
                                    placeholder="请输入关键字" :suffix-icon="Search" @keyup.enter.prevent="onSearch"
                                    clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="6" class="flex-end">
                    <el-button type="primary" @click="handleAdd">新增服务包</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>

    <!-- 初级包 -->
    <div v-if="basicPackages.length > 0">
        <p style="font-size: 16px; font-weight: bold; margin: 20px 0 10px 0;">初级包</p>
        <el-space wrap>
            <el-card class="box-card" v-for="item in basicPackages" :key="item._id" @click="handleViewDetail(item)"
                style="cursor: pointer;">
                <el-space direction="horizontal" align="center"
                    style="width: 300px; height: 120px; padding: 10px; border-radius: 8px;">
                    <div>
                        <img :src="item.image" alt="icon" style="width: 136px; height: 100px;">
                    </div>
                    <el-col :span="20">
                        <div style="font-size: 16px; font-weight: bold; margin-bottom: 8px;">{{ item.name }}</div>
                        <div style="font-size: 14px; color: #666; margin-bottom: 8px;">服务对象：{{ item.client }}</div>
                        <el-space direction="horizontal">
                            <el-tag type="danger">随访服务</el-tag>
                            <el-tag type="success">常规护理</el-tag>
                        </el-space>
                    </el-col>
                    <div style="position: relative; left: -16px;bottom: 71px;">
                        <el-tag
                            style="transform: rotate(45deg); padding: 4px 12px; font-size: 13px;color: aliceblue;background-color: #2984F8;">使用中</el-tag>
                    </div>
                </el-space>
            </el-card>
        </el-space>
    </div>

    <!-- 中级包 -->
    <div v-if="intermediatePackages.length > 0">
        <p style="font-size: 16px; font-weight: bold; margin: 20px 0 10px 0;">中级包</p>
        <el-space wrap>
            <el-card class="box-card" v-for="item in intermediatePackages" :key="item._id"
                @click="handleViewDetail(item)" style="cursor: pointer;">
                <el-space direction="horizontal" align="center"
                    style="width: 300px; height: 120px; padding: 10px; border-radius: 8px;">
                    <div>
                        <img :src="item.image" alt="icon" style="width: 136px; height: 100px;">
                    </div>
                    <el-col :span="20">
                        <div style="font-size: 16px; font-weight: bold; margin-bottom: 8px;">{{ item.name }}</div>
                        <div style="font-size: 14px; color: #666; margin-bottom: 8px;">服务对象：{{ item.client }}</div>
                        <el-space direction="horizontal">
                            <el-tag type="danger">随访服务</el-tag>
                            <el-tag type="success">常规护理</el-tag>
                        </el-space>
                    </el-col>
                    <div style="position: relative; left: -16px;bottom: 71px;">
                        <el-tag
                            style="transform: rotate(45deg); padding: 4px 12px; font-size: 13px;color: aliceblue;background-color: #2984F8;">使用中</el-tag>
                    </div>
                </el-space>
            </el-card>
        </el-space>
    </div>

    <!-- 高级包 -->
    <div v-if="advancedPackages.length > 0">
        <p style="font-size: 16px; font-weight: bold; margin: 20px 0 10px 0;">高级包</p>
        <el-space wrap>
            <el-card class="box-card" v-for="item in advancedPackages" :key="item._id" @click="handleViewDetail(item)"
                style="cursor: pointer;">
                <el-space direction="horizontal" align="center"
                    style="width: 300px; height: 120px; padding: 10px; border-radius: 8px;">
                    <div>
                        <img :src="item.image" alt="icon" style="width: 136px; height: 100px;">
                    </div>
                    <el-col :span="20">
                        <div style="font-size: 16px; font-weight: bold; margin-bottom: 8px;">{{ item.name }}</div>
                        <div style="font-size: 14px; color: #666; margin-bottom: 8px;">服务对象：{{ item.client }}</div>
                        <el-space direction="horizontal">
                            <el-tag type="danger">随访服务</el-tag>
                            <el-tag type="success">常规护理</el-tag>
                        </el-space>
                    </el-col>
                    <div style="position: relative; left: -16px;bottom: 71px;">
                        <el-tag
                            style="transform: rotate(45deg); padding: 4px 12px; font-size: 13px;color: aliceblue;background-color: #2984F8;">使用中</el-tag>
                    </div>
                </el-space>
            </el-card>
        </el-space>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { findServicePacksApi } from '@/api/servicepack';

// 路由实例
const router = useRouter();

// 定义服务项目的类型
interface ServicePacksType {
    _id: string;
    name: string;
    type: string;
    image: string;
    client: string;
    level?: string;
}

// 表格数据
const tableData = reactive<{ rows: ServicePacksType[]; total: number }>({ rows: [], total: 0 });

const formItem = ref({
    name: '',
    type: ''
});

// 计算属性：按级别分类
const basicPackages = computed(() => tableData.rows.filter(item => item.type.includes('基础包') || item.type.includes('初级包')));
const intermediatePackages = computed(() => tableData.rows.filter(item => item.type.includes('老人服务包') || item.type.includes('中级包')));
const advancedPackages = computed(() => tableData.rows.filter(item => item.type.includes('高级包')));

// 计算属性：
const uniqueTypes = computed(() => {
    const types = new Set(tableData.rows.map(item => item.type));
    return Array.from(types);
});

onMounted(() => {
    findServicePacks();
});

// 查询服务项目数据
function findServicePacks() {
    findServicePacksApi({
        name: formItem.value.name,
        type: formItem.value.type
    }).then(res => {
        console.log('444', res);
        if (res.code === 200) {
            tableData.rows = res.data.rows;
            tableData.total = res.data.total;
        }
    });
}

function onSearch() {
    findServicePacks();
}

function handleAdd() {
    router.push('/data/servicePack/add');
}

function handleViewDetail(item: ServicePacksType) {
    router.push(`/data/servicePack/detail/${item._id}`);
}
</script>


<style scoped>
.el-input--large {
    --el-input-height: 32px;
}

.search-container {
    padding: 20px 0;
    background: #fff;
    border-radius: 4px;
}

.search-form .el-row {
    display: flex;
    align-items: center;
}

.search-form .el-col>.el-row {
    width: 100%;
}

.search-form .el-form-item {
    margin-bottom: 0 !important;
    margin-right: 15px;
}



.search-form .el-form-item__label {
    padding: 0 8px 0 0;

}

/* 表格样式 */
.textitem {
    position: relative;
    padding-left: 12px;
}

.textitem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
}

.price-header .cell {
    color: #FA7468 !important;
    font-weight: bold;
}

.price-value {
    color: #FA7468;
    font-weight: bold;
}


.no-padding {
    padding-left: 0 !important;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

::placeholder {
    color: rgb(204, 204, 204);
}

/* 初级包 */

.box-card {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.text.item {
    padding: 5px;
}

.the-left {
    background-color: #f0f0f0;
    border: 1px solid red;
}

.the-right {
    background-color: #e0e0e0;
    border: 1px solid blue;
}
</style>